<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners" >
        <use :xlink:href="iconName" />
    </svg>
</template>
<script lang='ts' >
import {
    Component,
    Prop,
    Vue,
    Emit
} from 'vue-property-decorator';
@Component
export default class SvgIcon extends Vue {
    name: string = 'SvgIcon';
    @Prop({ type: String,  required: true}) private iconClass!: string;
    @Prop({
      type: String,
      default: ''
    }) private className?: string;
    public  get iconName() {
        return `#icon-${this.iconClass}`;
    }
    public get svgClass() {
        if (this.className) {
            return 'svg-icon ' + this.className;
        }
        return 'svg-icon';
    }
}
</script>

<style scoped>
    .svg-icon {
        width: 1.6em;
        height: 1.6em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
